<template>
    <div class="location">
        <Top text="收货地址"/>
        <Item
            v-for="(address) in locationList " :key="address._id"
            :item="address"
        />

        <div class="addLocation" @click="$router.push('/addLocation')">
            <img src="@/assets/add.png" alt="">
            <p>新增地址</p>
        </div>
    </div>
</template>

<script>
    import Item from '@/views/Location/Item'
    import {mapState} from 'vuex'
    export default {
        name:"Location-View",
        components:{Item},
        computed:{
            ...mapState('About',['locationList'])
        },
        methods: {
            // 获取收货地址
            getLocationList(){
                this.$store.dispatch('About/getLocationList')
            }
        },
        created() {
            this.getLocationList()
        },
        mounted() {
            console.log(this.locationList)
        },
    }
</script>

<style scoped lang="less">

    .addLocation{
        position: fixed;
        width: 100%;
        display: flex;
        height: 13.3vw;
        justify-content: center;
        align-items: center;
        bottom: 0;
        box-shadow: 2.7vw 2.7vw 2.7vw 2.7vw rgba(0, 0, 0, 0.151);

        img{
            width: 6.7vw;
            height: 6.7vw;
            margin-right: 2.7vw;
        }
        p{
            font-size: 4.3vw;
            color: #1A73E8;
        }
    }
</style>